<template>
    <div class="page setting-page">
        <el-form ref="settingForm" label-width="90px" class="setting-form" size="small" label-position="left">
            <div class="setting-title">项目基本信息</div>
            <div class="setting-form">
                <div class="form-title">基础信息</div>
                <div class="form-div">
                    <el-form-item label="项目名称">
                        <el-input style="width:330px"></el-input>
                    </el-form-item>
                    <el-form-item label="项目单位">
                        <el-input style="width:330px"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input  type="textarea" :rows="3"></el-input>
                    </el-form-item>
                </div>
                <div class="form-title">项目地</div>
                <div class="form-div">
                    <el-form-item label="" label-width="0">
                        <el-radio-group v-model="radio">
                            <el-radio :label="1">按行政区划选择</el-radio>
                            <el-radio :label="2">按经纬度选择</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="radio==1">
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="洲际">
                                    <el-select  placeholder="请选择" style="width:180px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="15">
                                <el-form-item label="国家">
                                    <el-select  placeholder="请选择" style="width:180px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="省份" style="width:180px">
                                    <el-select  placeholder="请选择">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="15">
                                <el-form-item label="城市" style="width:180px">
                                    <el-select  placeholder="请选择">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <div v-if="radio==2">
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="经度">
                                    <el-input style="width:180px" v-model="lng"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="15">
                                <el-form-item label="纬度">
                                    <el-input style="width:180px" v-model="lat"></el-input>
                                    <span style="padding-left:10px">
                                        <el-link type="info" style="font-size:12px" @click="showMap">通过百度地图拾取经纬度</el-link>
                                    </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="海拔">
                                    <el-input style="width:150px" disabled></el-input><span style="padding-left:10px">M</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="15">
                                <el-form-item label="时区">
                                    <el-input style="width:180px" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <el-form-item label="数据来源">
                        <el-select  placeholder="请选择" style="width:180px">
                            <el-option value="1"></el-option>
                        </el-select>
                    </el-form-item>

                </div>
                <div class="chart-div form-div">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>气象数据</span>
                            <span style="float:right">
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                        <div style="height:300px">

                        </div>
                    </el-card>

                </div>
                <div class="form-title">地面类型</div>
                <div class="form-div">
                    <el-form-item label="" label-width="0">
                        <el-radio-group v-model="radio2">
                            <el-radio :label="1">固定地面类型</el-radio>
                            <el-radio :label="2">地面类型逐月变化</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="radio2==1">
                        <el-form-item label="地面类型">
                            <el-select  placeholder="请选择" style="width:400px">
                                <el-option value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地面反射率">
                            <el-input style="width:200px" disabled></el-input><span style="padding-left:10px">%</span>
                            <span style="padding-left:10px"><el-checkbox>自定义反射率</el-checkbox></span>
                        </el-form-item>
                    </div>

                    <div v-if="radio2==2">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="一月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="二月" label-width="55px" >
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="三月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="四月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="五月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="六月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="七月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="八月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="九月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="十月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="十一月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="十二月" label-width="55px">
                                    <el-select  placeholder="请选择" style="width:120px">
                                        <el-option value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>

        </el-form>

        <div class="setting-page-bottom">
                <div class="img"><img src="../static/img/logo.png"/> </div>
                <div class="right-link-div">
                    <div class="link-btn active">项目基本信息</div>
                    <div class="link-btn">光伏组件配置</div>
                    <div class="link-btn">逆变器配置</div>
                    <div class="link-btn">线缆配置</div>
                    <div class="link-btn">损耗估算</div>
                    <div class="link-btn">生成报告</div>
                    <div class="next-btn"><el-button type="primary">下一步</el-button></div>
                </div>
        </div>

        <el-dialog
                title="百度地图拾取经纬度"
                :visible.sync="dialogVisible"
                width="800px">
            <!-- 地图盒子 -->
            <div style="width:100%;position: relative">
                <!-- 搜索显示框 -->
                <div id="r-result">
                    <el-input id="cityName" placeholder="请输入地址" size="mini" style="width:150px" v-model="cityName"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="theLocation()" size="mini">搜索</el-button>
                    <span style="padding-left:10px;">经度：</span><el-input id="lng" size="mini" style="width:120px" disabled></el-input>
                    <span style="padding-left:10px;">纬度：</span><el-input id="lat" size="mini" style="width:120px" disabled></el-input>
                </div>
                <div id="allmap"></div>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
  import {validatePhone} from '@/utils/validate';
  export default {
    name: 'settingBase',
    data() {


      return {
          radio:1,
          radio2:1,
          dialogVisible:false,
          local:null,
          cityName:'',
          lng:'',//经度
          lat:'',//纬度


      }
    },
    methods: {
            //显示地图
            showMap(){
                this.dialogVisible = true;
                setTimeout(()=>{
                    this.initMap();
                },500)

            },
            // 发起检索
            theLocation() {
              let city = document.getElementById("cityName").value;
              if (city != "") {
                  this.local.search(city);
              }
            },

          // 弹出经纬度
          submit() {
              let lat = document.getElementById('lat');
              let lng = document.getElementById('lng');
              this.lat = lat.value;
              this.lng = lng.value;
              this.dialogVisible = false;
          },
        //初始化地图
        initMap(){
            // 在指定容器创建地图实例并设置最大最小缩放级别
            let map = new BMap.Map("allmap", {
                minZoom: 5,
                maxZoom: 19
            });

            // 初始化地图，设置中心点和显示级别
            map.centerAndZoom(new BMap.Point(119.979759, 31.819232), 19);

            // 开启鼠标滚轮缩放功能，仅对PC上有效
            map.enableScrollWheelZoom(true);

            // 将控件（平移缩放控件）添加到地图上
            map.addControl(new BMap.NavigationControl());

            // 为地图增加点击事件，为input赋值
            map.addEventListener("click", function(e) {
                document.getElementById('lat').value = e.point.lat;
                document.getElementById('lng').value = e.point.lng;

            });

            // 创建位置检索、周边检索和范围检索
            this.local = new BMap.LocalSearch(map, {
                renderOptions: {
                    map: map
                }
            });
        },

    },
    created() {





    }
  }
</script>

<style>
    #allmap {
        height: 300px;
        width: 100%;
        overflow: hidden;
    }

    #r-result {
        width: 100%;
        font-size: 14px;
        margin-bottom:20px
    }
</style>



